<template>
  <div class="app-container Email-container nohead">
    <el-tabs
      tab-position="left"
      style="height: 100%"
      v-model="activeTab"
      :before-leave="beforeLeaveTab"
    >
      <el-tab-pane name="writeMail">
        <span slot="label"><i class="icon-ym icon-ym-btn-edit"></i>写邮件</span>
      </el-tab-pane>
      <el-tab-pane name="inBox">
        <span slot="label"
          ><i class="icon-ym icon-ym-extend-envelope"></i>收件箱</span
        >
      </el-tab-pane>
      <el-tab-pane name="star">
        <span slot="label"
          ><i class="icon-ym icon-ym-extend-star"></i>星标件</span
        >
      </el-tab-pane>
      <el-tab-pane name="draft">
        <span slot="label"
          ><i class="icon-ym icon-ym-extend-exclamation-triangle"></i
          >草稿箱</span
        >
      </el-tab-pane>
      <el-tab-pane name="sent">
        <span slot="label"
          ><i class="icon-ym icon-ym-extend-paper-plane"></i>已发送</span
        >
      </el-tab-pane>
      <el-tab-pane name="setAccount">
        <span slot="label"
          ><i class="icon-ym icon-ym-extend-cog"></i>邮箱配置</span
        >
      </el-tab-pane>
      <div class="main jsbos-flex-main">
        <el-row class="jsbos-common-search-box" :gutter="16">
          <el-form @submit.native.prevent>
            <el-col :span="6">
              <el-form-item label="关键词">
                <el-input
                  v-model="keyword"
                  placeholder="请输入关键词查询"
                  clearable
                  @keyup.enter.native="search()"
                />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="日期">
                <el-date-picker
                  v-model="pickerVal"
                  type="daterange"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  :picker-options="pickerOptions"
                  value-format="timestamp"
                  clearable
                  :editable="false"
                >
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item>
                <el-button
                  type="primary"
                  icon="el-icon-search"
                  @click="search()"
                >
                  {{ $t("common.search") }}</el-button
                >
                <el-button icon="el-icon-refresh-right" @click="reset()"
                  >{{ $t("common.reset") }}
                </el-button>
              </el-form-item>
            </el-col>
          </el-form>
          <div class="jsbos-common-search-box-right">
            <el-button
              type="primary"
              icon="el-icon-download"
              @click="receiveEmail"
              :loading="receiveing"
              >收邮件</el-button
            >
          </div>
        </el-row>
        <jsbos-table v-loading="listLoading" :data="list">
          <el-table-column prop="isRead" label="" width="40">
            <template slot-scope="scope">
              <template v-if="activeTab === 'inBox' || activeTab === 'star'">
                <span v-if="scope.row.isRead">
                  <i
                    class="icon-ym icon-ym-extend-envelope-open-o i-default"
                    title="点击标记为未读"
                    @click="ReceiveUnread(scope.row)"
                  ></i
                ></span>
                <span v-else
                  ><i
                    class="icon-ym icon-ym-extend-envelope text-warning"
                    title="点击标记为已读"
                    @click="ReceiveRead(scope.row)"
                  ></i
                ></span>
              </template>
              <span v-else
                ><i class="icon-ym icon-ym-extend-envelope-open-o i-default"></i
              ></span>
            </template>
          </el-table-column>
          <el-table-column prop="attachment" label="" width="40">
            <template slot-scope="scope">
              <span
                v-if="
                  scope.row.attachment &&
                  JSON.parse(scope.row.attachment).length
                "
                ><i class="icon-ym icon-ym-extend-paperclip i-default"></i
              ></span>
            </template>
          </el-table-column>
          <el-table-column
            prop="sender"
            label="发件人"
            width="180"
            v-if="activeTab === 'inBox' || activeTab === 'star'"
          />
          <el-table-column
            prop="recipient"
            label="收件人"
            width="180"
            v-if="activeTab === 'draft' || activeTab === 'sent'"
          />
          <el-table-column prop="subject" label="主题" show-overflow-tooltip>
            <template slot-scope="scope">
              <el-link
                @click="write(scope.row.id)"
                style="font-size: 12px"
                v-if="activeTab === 'draft'"
              >
                {{ scope.row.subject }}
              </el-link>
              <el-link
                @click="
                  readInfo(scope.row.id, activeTab === 'sent', scope.$index)
                "
                style="font-size: 12px"
                v-else
              >
                {{ scope.row.subject }}
              </el-link>
            </template>
          </el-table-column>
          <el-table-column prop="creatorTime" label="时间" width="120">
            <template slot-scope="scope">
              <span v-if="activeTab === 'inBox' || activeTab === 'star'">
                {{ scope.row.fdate | toDate() }}</span
              >
              <span v-if="activeTab === 'draft' || activeTab === 'sent'">
                {{ scope.row.creatorTime | toDate() }}
              </span>
            </template>
          </el-table-column>
          <el-table-column
            prop="starred"
            label=""
            width="40"
            v-if="activeTab === 'inBox' || activeTab === 'star'"
          >
            <template slot-scope="scope">
              <span v-if="scope.row.starred"
                ><i
                  class="icon-ym icon-ym-extend-star text-warning img-star"
                  title="点击取消星标"
                  @click="ReceiveNoStarred(scope.row, scope.$index)"
                ></i
              ></span>
              <span v-else
                ><i
                  class="icon-ym icon-ym-extend-star-o i-default img-star"
                  title="点击标记为星标邮件"
                  @click="ReceiveYesStarred(scope.row)"
                ></i
              ></span>
            </template>
          </el-table-column>
          <el-table-column label="操作" fixed="right" width="50">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                class="jsbos-table-delBtn"
                @click="handleDel(scope.$index, scope.row.id)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </jsbos-table>
        <pagination
          :total="total"
          :page.sync="listQuery.currentPage"
          :limit.sync="listQuery.pageSize"
          @pagination="initData"
        />
      </div>
    </el-tabs>
    <Config v-if="configVisible" ref="config" />
    <Form
      v-show="formVisible"
      ref="Form"
      @close="formVisible = false"
      @refresh="refresh"
    />
    <Detail
      v-show="detailVisible"
      ref="detail"
      @close="detailVisible = false"
      @setRead="setRead"
    />
  </div>
</template>

<script>
import {
  EmailList,
  Receive,
  Delete,
  ReceiveRead,
  ReceiveUnread,
  ReceiveYesStarred,
  ReceiveNoStarred,
} from "@/api/extend/email";
import Config from "./Config";
import Form from "./Form";
import Detail from "./Detail";

export default {
  name: "extend-email",
  components: { Config, Form, Detail },
  data() {
    return {
      receiveing: false,
      configVisible: false,
      formVisible: false,
      detailVisible: false,
      subordinateIds: [],
      activeTab: "inBox",
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      pickerVal: [],
      keyword: "",
      startTime: "",
      endTime: "",
      total: 0,
      listLoading: true,
      listQuery: {
        currentPage: 1,
        pageSize: 20,
        sort: "desc",
      },
      list: [],
    };
  },
  watch: {
    activeTab(val) {
      this.reset();
    },
  },
  created() {
    this.initData();
  },
  methods: {
    reset() {
      this.list = [];
      this.keyword = "";
      this.pickerVal = "";
      this.startTime = "";
      this.endTime = "";
      this.listQuery = {
        currentPage: 1,
        pageSize: 20,
        sort: "desc",
      };
      this.initData();
    },
    initData() {
      this.listLoading = true;
      let data = {
        ...this.listQuery,
        keyword: this.keyword,
        startTime: this.startTime,
        endTime: this.endTime,
        type: this.activeTab,
      };
      EmailList(data).then((res) => {
        this.list = res.data.list;
        this.total = res.data.pagination.total;
        this.listLoading = false;
      });
    },
    beforeLeaveTab(activeName, oldActiveName) {
      let noChangeList = [
        "writeMail",
        "setAccount",
        "Personal",
        "Work",
        "Business",
        "Clients",
      ];
      if (noChangeList.indexOf(activeName) > -1) {
        if (activeName === "setAccount") {
          this.configVisible = true;
          this.$nextTick(() => {
            this.$refs.config.init();
          });
        }
        if (activeName === "writeMail") {
          this.write();
        }
        return false;
      }
    },
    search() {
      if (this.pickerVal && this.pickerVal.length) {
        this.startTime = this.pickerVal[0];
        this.endTime = this.pickerVal[1];
      } else {
        this.startTime = "";
        this.endTime = "";
      }
      this.listQuery = {
        currentPage: 1,
        pageSize: 20,
        sort: "desc",
      };
      this.initData();
    },
    readInfo(id, isSend, index) {
      this.detailVisible = true;
      this.$nextTick(() => {
        this.$refs.detail.init(id, isSend, index);
      });
    },
    write(id) {
      this.formVisible = true;
      this.$nextTick(() => {
        this.$refs.Form.init(id);
      });
    },
    // 收邮件
    receiveEmail() {
      this.receiveing = true;
      Receive()
        .then((res) => {
          this.receiveing = false;
          this.$message({
            message: `收件成功${res.data}条`,
            type: "success",
            duration: 1000,
            onClose: () => {},
          });
          if (this.activeTab == "inBox") {
            this.reset();
          } else {
            this.activeTab = "inBox";
          }
        })
        .catch(() => {
          this.receiveing = false;
        });
    },
    handleDel(index, id) {
      this.$confirm(this.$t("common.delTip"), this.$t("common.tipTitle"), {
        type: "warning",
      })
        .then(() => {
          Delete(id).then((res) => {
            this.list.splice(index, 1);
            this.$message({
              type: "success",
              message: res.msg,
            });
          });
        })
        .catch(() => {});
    },
    ReceiveRead(row) {
      ReceiveRead(row.id).then((res) => {
        row.isRead = 1;
        this.$message({
          type: "success",
          message: res.msg,
        });
      });
    },
    ReceiveUnread(row) {
      ReceiveUnread(row.id).then((res) => {
        row.isRead = 0;
        this.$message({
          type: "success",
          message: res.msg,
        });
      });
    },
    ReceiveYesStarred(row) {
      ReceiveYesStarred(row.id).then((res) => {
        row.starred = 1;
        this.$message({
          type: "success",
          message: res.msg,
        });
      });
    },
    ReceiveNoStarred(row, index) {
      ReceiveNoStarred(row.id).then((res) => {
        if (this.activeTab === "star") {
          this.list.splice(index, 1);
        } else {
          row.starred = 0;
        }
        this.$message({
          type: "success",
          message: res.msg,
        });
      });
    },
    move(id, key) {
      // console.log(id, key);
    },
    setRead(index) {
      this.list[index].isRead = 1;
    },
    refresh(isSend) {
      this.formVisible = false;
      if (isSend) {
        if (this.activeTab === "sent") {
          this.reset();
        } else {
          this.activeTab = "sent";
        }
      } else {
        if (this.activeTab === "draft") {
          this.reset();
        } else {
          this.activeTab = "draft";
        }
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.Email-container {
  position: relative;
  common-search-box {
    margin-bottom: 0;
  }
  >>> .el-tabs__item {
    text-align: left !important;
    width: 160px !important;
    .icon-ym {
      font-size: 14px;
      margin-right: 8px;
    }
    .ym-custom {
      font-size: 12px;
      margin-right: 10px;
    }
  }
  >>> .el-tabs__content {
    height: 100%;
    // .el-tab-pane {
    //   height: 100%;
    //   overflow: hidden;
    // }
  }
  >>> #tab-line {
    height: 20px;
    width: 160px;
    &::after {
      position: absolute;
      width: 100%;
      height: 1px;
      background: #ddd;
      content: "";
      display: block;
      overflow: hidden;
      top: 10px;
      left: 0;
    }
  }
  .main {
    height: 100%;
    overflow: hidden;
    .icon-ym {
      cursor: pointer;
      font-size: 14px;
      &.img-star {
        font-size: 16px;
      }
    }
  }
}
</style>
